doctype html
html(lang='en')

    head

        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(name='description', content='')
        meta(name='author', content='')

        title Agency - Start Bootstrap Theme

        link(rel='icon', type='image/x-icon', href='assets/img/favicon.ico')

        // Font Awesome icons (free version)
        script(src='https://use.fontawesome.com/releases/v5.15.1/js/all.js', crossorigin='anonymous')

        // Google fonts
        link(href='https://fonts.googleapis.com/css?family=Montserrat:400,700', rel='stylesheet', type='text/css')
        link(href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic', rel='stylesheet', type='text/css')
        link(href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700', rel='stylesheet', type='text/css')

        // Core theme CSS (includes Bootstrap)
        link(href='css/styles.css', rel='stylesheet')

    body#page-top

        // Navigation
        nav#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top
            .container
                a.navbar-brand.js-scroll-trigger(href='#page-top')
                    img(src='assets/img/navbar-logo.svg', alt='')
                button.navbar-toggler.navbar-toggler-right(type='button', data-toggle='collapse', data-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
                    | Menu
                    i.fas.fa-bars.ml-1
                #navbarResponsive.collapse.navbar-collapse
                    ul.navbar-nav.text-uppercase.ml-auto
                        li.nav-item
                            a.nav-link.js-scroll-trigger(href='#services') Services
                        li.nav-item
                            a.nav-link.js-scroll-trigger(href='#portfolio') Portfolio
                        li.nav-item
                            a.nav-link.js-scroll-trigger(href='#about') About
                        li.nav-item
                            a.nav-link.js-scroll-trigger(href='#team') Team
                        li.nav-item
                            a.nav-link.js-scroll-trigger(href='#contact') Contact
        // Masthead
        header.masthead
            .container
                .masthead-subheading Welcome To Our Studio!
                .masthead-heading.text-uppercase It's Nice To Meet You
                a.btn.btn-primary.btn-xl.text-uppercase.js-scroll-trigger(href='#services') Tell Me More

        // Services
        section#services.page-section
            .container
                .text-center
                    h2.section-heading.text-uppercase Services
                    h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
                .row.text-center
                    .col-md-4
                        span.fa-stack.fa-4x
                            i.fas.fa-circle.fa-stack-2x.text-primary
                            i.fas.fa-shopping-cart.fa-stack-1x.fa-inverse
                        h4.my-3 E-Commerce
                        p.text-muted
                            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
                    .col-md-4
                        span.fa-stack.fa-4x
                            i.fas.fa-circle.fa-stack-2x.text-primary
                            i.fas.fa-laptop.fa-stack-1x.fa-inverse
                        h4.my-3 Responsive Design
                        p.text-muted
                            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.
                    .col-md-4
                        span.fa-stack.fa-4x
                            i.fas.fa-circle.fa-stack-2x.text-primary
                            i.fas.fa-lock.fa-stack-1x.fa-inverse
                        h4.my-3 Web Security
                        p.text-muted
                            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

        // Portfolio Grid
        section#portfolio.page-section.bg-light
            .container
                .text-center
                    h2.section-heading.text-uppercase Portfolio
                    h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
                .row
                    .col-lg-4.col-sm-6.mb-4
                        .portfolio-item
                            a.portfolio-link(data-toggle='modal', href='#portfolioModal1')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/01-thumbnail.jpg', alt='')
                            .portfolio-caption
                                .portfolio-caption-heading Threads
                                .portfolio-caption-subheading.text-muted Illustration
                    .col-lg-4.col-sm-6.mb-4
                        .portfolio-item
                            a.portfolio-link(data-toggle='modal', href='#portfolioModal2')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/02-thumbnail.jpg', alt='')
                            .portfolio-caption
                                .portfolio-caption-heading Explore
                                .portfolio-caption-subheading.text-muted Graphic Design
                    .col-lg-4.col-sm-6.mb-4
                        .portfolio-item
                            a.portfolio-link(data-toggle='modal', href='#portfolioModal3')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/03-thumbnail.jpg', alt='')
                            .portfolio-caption
                                .portfolio-caption-heading Finish
                                .portfolio-caption-subheading.text-muted Identity
                    .col-lg-4.col-sm-6.mb-4.mb-lg-0
                        .portfolio-item
                            a.portfolio-link(data-toggle='modal', href='#portfolioModal4')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/04-thumbnail.jpg', alt='')
                            .portfolio-caption
                                .portfolio-caption-heading Lines
                                .portfolio-caption-subheading.text-muted Branding
                    .col-lg-4.col-sm-6.mb-4.mb-sm-0
                        .portfolio-item
                            a.portfolio-link(data-toggle='modal', href='#portfolioModal5')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/05-thumbnail.jpg', alt='')
                            .portfolio-caption
                                .portfolio-caption-heading Southwest
                                .portfolio-caption-subheading.text-muted Website Design
                    .col-lg-4.col-sm-6
                        .portfolio-item
                            a.portfolio-link(data-toggle='modal', href='#portfolioModal6')
                                .portfolio-hover
                                    .portfolio-hover-content
                                        i.fas.fa-plus.fa-3x
                                img.img-fluid(src='assets/img/portfolio/06-thumbnail.jpg', alt='')
                            .portfolio-caption
                                .portfolio-caption-heading Window
                                .portfolio-caption-subheading.text-muted Photography

        // About
        section#about.page-section
            .container
                .text-center
                    h2.section-heading.text-uppercase About
                    h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
                ul.timeline
                    li
                        .timeline-image
                            img.rounded-circle.img-fluid(src='assets/img/about/1.jpg', alt='')
                        .timeline-panel
                            .timeline-heading
                                h4 2009-2011
                                h4.subheading Our Humble Beginnings
                            .timeline-body
                                p.text-muted
                                    | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
                    li.timeline-inverted
                        .timeline-image
                            img.rounded-circle.img-fluid(src='assets/img/about/2.jpg', alt='')
                        .timeline-panel
                            .timeline-heading
                                h4 March 2011
                                h4.subheading An Agency is Born
                            .timeline-body
                                p.text-muted
                                    | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
                    li
                        .timeline-image
                            img.rounded-circle.img-fluid(src='assets/img/about/3.jpg', alt='')
                        .timeline-panel
                            .timeline-heading
                                h4 December 2012
                                h4.subheading Transition to Full Service
                            .timeline-body
                                p.text-muted
                                    | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
                    li.timeline-inverted
                        .timeline-image
                            img.rounded-circle.img-fluid(src='assets/img/about/4.jpg', alt='')
                        .timeline-panel
                            .timeline-heading
                                h4 July 2014
                                h4.subheading Phase Two Expansion
                            .timeline-body
                                p.text-muted
                                    | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
                    li.timeline-inverted
                        .timeline-image
                            h4
                                | Be Part
                                br
                                | Of Our
                                br
                                | Story!

        // Team
        section#team.page-section.bg-light
            .container
                .text-center
                    h2.section-heading.text-uppercase Our Amazing Team
                    h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
                .row
                    .col-lg-4
                        .team-member
                            img.mx-auto.rounded-circle(src='assets/img/team/1.jpg', alt='')
                            h4 Kay Garland
                            p.text-muted Lead Designer
                            a.btn.btn-dark.btn-social.mx-2(href='#!')
                                i.fab.fa-twitter
                            a.btn.btn-dark.btn-social.mx-2(href='#!')
                                i.fab.fa-facebook-f
                            a.btn.btn-dark.btn-social.mx-2(href='#!')
                                i.fab.fa-linkedin-in
                    .col-lg-4
                        .team-member
                            img.mx-auto.rounded-circle(src='assets/img/team/2.jpg', alt='')
                            h4 Larry Parker
                            p.text-muted Lead Marketer
                            a.btn.btn-dark.btn-social.mx-2(href='#!')
                                i.fab.fa-twitter
                            a.btn.btn-dark.btn-social.mx-2(href='#!')
                                i.fab.fa-facebook-f
                            a.btn.btn-dark.btn-social.mx-2(href='#!')
                                i.fab.fa-linkedin-in
                    .col-lg-4
                        .team-member
                            img.mx-auto.rounded-circle(src='assets/img/team/3.jpg', alt='')
                            h4 Diana Petersen
                            p.text-muted Lead Developer
                            a.btn.btn-dark.btn-social.mx-2(href='#!')
                                i.fab.fa-twitter
                            a.btn.btn-dark.btn-social.mx-2(href='#!')
                                i.fab.fa-facebook-f
                            a.btn.btn-dark.btn-social.mx-2(href='#!')
                                i.fab.fa-linkedin-in
                .row
                    .col-lg-8.mx-auto.text-center
                        p.large.text-muted
                            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.

        // Clients
        div.py-5
            .container
                .row
                    .col-md-3.col-sm-6.my-3
                        a(href='#!')
                            img.img-fluid.d-block.mx-auto(src='assets/img/logos/envato.jpg', alt='')
                    .col-md-3.col-sm-6.my-3
                        a(href='#!')
                            img.img-fluid.d-block.mx-auto(src='assets/img/logos/designmodo.jpg', alt='')
                    .col-md-3.col-sm-6.my-3
                        a(href='#!')
                            img.img-fluid.d-block.mx-auto(src='assets/img/logos/themeforest.jpg', alt='')
                    .col-md-3.col-sm-6.my-3
                        a(href='#!')
                            img.img-fluid.d-block.mx-auto(src='assets/img/logos/creative-market.jpg', alt='')

        // Contact
        section#contact.page-section
            .container
                .text-center
                    h2.section-heading.text-uppercase Contact Us
                    h3.section-subheading.text-muted Lorem ipsum dolor sit amet consectetur.
                form#contactForm(name='sentMessage', novalidate='novalidate')
                    .row.align-items-stretch.mb-5
                        .col-md-6
                            .form-group
                                input#name.form-control(type='text', placeholder='Your Name *', required='required', data-validation-required-message='Please enter your name.')
                                p.help-block.text-danger
                            .form-group
                                input#email.form-control(type='email', placeholder='Your Email *', required='required', data-validation-required-message='Please enter your email address.')
                                p.help-block.text-danger
                            .form-group.mb-md-0
                                input#phone.form-control(type='tel', placeholder='Your Phone *', required='required', data-validation-required-message='Please enter your phone number.')
                                p.help-block.text-danger
                        .col-md-6
                            .form-group.form-group-textarea.mb-md-0
                                textarea#message.form-control(placeholder='Your Message *', required='required', data-validation-required-message='Please enter a message.')
                                p.help-block.text-danger
                    .text-center
                            #success
                            button#sendMessageButton.btn.btn-primary.btn-xl.text-uppercase(type='submit') Send Message

        // Footer
        footer.footer.py-4
            .container
                .row.align-items-center
                    .col-lg-4.text-lg-left
                        | Copyright © Your Website 2020
                    .col-lg-4.my-3.my-lg-0
                        a.btn.btn-dark.btn-social.mx-2(href='#!')
                            i.fab.fa-twitter
                        a.btn.btn-dark.btn-social.mx-2(href='#!')
                            i.fab.fa-facebook-f
                        a.btn.btn-dark.btn-social.mx-2(href='#!')
                            i.fab.fa-linkedin-in
                    .col-lg-4.text-lg-right
                        a.mr-3(href='#!') Privacy Policy
                        a(href='#!') Terms of Use

        // Portfolio Modals
        // Modal 1
        #portfolioModal1.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
            .modal-dialog
                .modal-content
                    .close-modal(data-dismiss='modal')
                        img(src="assets/img/close-icon.svg", alt='Close modal')
                    .container
                        .row.justify-content-center
                            .col-lg-8
                                .modal-body
                                    // Project Details Go Here
                                    h2.text-uppercase Project Name
                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/01-full.jpg', alt='')
                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
                                    ul.list-inline
                                        li Date: January 2020
                                        li Client: Threads
                                        li Category: Illustration
                                    button.btn.btn-primary(data-dismiss='modal', type='button')
                                        i.fas.fa-times.mr-1
                                        | Close Project
        // Modal 2
        #portfolioModal2.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
            .modal-dialog
                .modal-content
                    .close-modal(data-dismiss='modal')
                        img(src="assets/img/close-icon.svg", alt='Close modal')
                    .container
                        .row.justify-content-center
                            .col-lg-8
                                .modal-body
                                    // Project Details Go Here
                                    h2.text-uppercase Project Name
                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/02-full.jpg', alt='')
                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
                                    ul.list-inline
                                        li Date: January 2020
                                        li Client: Explore
                                        li Category: Graphic Design
                                    button.btn.btn-primary(data-dismiss='modal', type='button')
                                        i.fas.fa-times.mr-1
                                        | Close Project
        // Modal 3
        #portfolioModal3.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
            .modal-dialog
                .modal-content
                    .close-modal(data-dismiss='modal')
                        img(src="assets/img/close-icon.svg", alt='Close modal')
                    .container
                        .row.justify-content-center
                            .col-lg-8
                                .modal-body
                                    // Project Details Go Here
                                    h2.text-uppercase Project Name
                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/03-full.jpg', alt='')
                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
                                    ul.list-inline
                                        li Date: January 2020
                                        li Client: Finish
                                        li Category: Identity
                                    button.btn.btn-primary(data-dismiss='modal', type='button')
                                        i.fas.fa-times.mr-1
                                        | Close Project
        // Modal 4
        #portfolioModal4.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
            .modal-dialog
                .modal-content
                    .close-modal(data-dismiss='modal')
                        img(src="assets/img/close-icon.svg", alt='Close modal')
                    .container
                        .row.justify-content-center
                            .col-lg-8
                                .modal-body
                                    // Project Details Go Here
                                    h2.text-uppercase Project Name
                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/04-full.jpg', alt='')
                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
                                    ul.list-inline
                                        li Date: January 2020
                                        li Client: Lines
                                        li Category: Branding
                                    button.btn.btn-primary(data-dismiss='modal', type='button')
                                        i.fas.fa-times.mr-1
                                        | Close Project
        // Modal 5
        #portfolioModal5.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
            .modal-dialog
                .modal-content
                    .close-modal(data-dismiss='modal')
                        img(src="assets/img/close-icon.svg", alt='Close modal')
                    .container
                        .row.justify-content-center
                            .col-lg-8
                                .modal-body
                                    // Project Details Go Here
                                    h2.text-uppercase Project Name
                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/05-full.jpg', alt='')
                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
                                    ul.list-inline
                                        li Date: January 2020
                                        li Client: Southwest
                                        li Category: Website Design
                                    button.btn.btn-primary(data-dismiss='modal', type='button')
                                        i.fas.fa-times.mr-1
                                        | Close Project
        // Modal 6
        #portfolioModal6.portfolio-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
            .modal-dialog
                .modal-content
                    .close-modal(data-dismiss='modal')
                        img(src="assets/img/close-icon.svg", alt='Close modal')
                    .container
                        .row.justify-content-center
                            .col-lg-8
                                .modal-body
                                    // Project Details Go Here
                                    h2.text-uppercase Project Name
                                    p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur.
                                    img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/06-full.jpg', alt='')
                                    p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!
                                    ul.list-inline
                                        li Date: January 2020
                                        li Client: Window
                                        li Category: Photography
                                    button.btn.btn-primary(data-dismiss='modal', type='button')
                                        i.fas.fa-times.mr-1
                                        | Close Project

        // Bootstrap core JS
        script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js')
        script(src='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js')

        // Third party plugin JS
        script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js')

        // Contact form JS
        script(src='assets/mail/jqBootstrapValidation.js')
        script(src='assets/mail/contact_me.js')

        // Core theme JS
        script(src='js/scripts.js')